<template>
  <div>
    <el-form :model="bpmnFormData" label-width="80px" :rules="rules"  size="small">
        <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程标识': '节点ID'" prop="id">
          <el-input v-model="bpmnFormData.id" @change="updateElementTask('id')"/>
        </el-form-item>
        <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程名称': '节点名称'" prop="name">
          <el-input v-model="bpmnFormData.name" @change="updateElementTask('name')"/>
        </el-form-item>
        <!--流程的基础属性-->
        <template v-if="bpmnFormData.$type === 'bpmn:Process'">
        <!-- 默认允许-->
          <el-form-item prop="routineTask" label-width="100px">
            <template slot="label">
              <span>
                 常规任务
                 <el-tooltip placement="top">
                    <template slot="content">
                       <div>
                         第一个任务节点是否默认为流程发起人节点
                       </div>
                    </template>
                    <i class="el-icon-question" />
                 </el-tooltip>
              </span>
            </template>
            <el-switch
              @change="updateElementTask('routineTask')"
              v-model="bpmnFormData.routineTask"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </el-form-item>
          <el-form-item prop="clearForm" label-width="100px">
            <template slot="label">
              <span>
                 清除表单
                 <el-tooltip placement="top">
                  <template slot="content">
                       <div>
                         退回, 驳回流程后是否清除表单数据
                       </div>
                    </template>
                    <i class="el-icon-question" />
                 </el-tooltip>
              </span>
            </template>
            <el-switch
              @change="updateElementTask('clearForm')"
              v-model="bpmnFormData.clearForm"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </el-form-item>
        </template>
        <el-form-item v-if="bpmnFormData.$type === 'bpmn:SubProcess'" label="状态">
          <el-switch v-model="bpmnFormData.isExpanded" active-text="展开" inactive-text="折叠" @change="updateElementTask('isExpanded')" />
        </el-form-item>
        <div>
          <timer-event-panel :id="id" v-if="eventType === 'Timer'"/>
          <message-event-panel :id="id" v-else-if="eventType === 'Message'"/>
          <signal-event-panel :id="id" v-else-if="eventType === 'Signal'"/>
          <error-event-panel :id="id" v-else-if="eventType === 'Error'"/>
          <condition-event-panel :id="id" v-else-if="eventType === 'Condition'"/>
        </div>
        <el-form-item label="节点描述">
          <el-input :rows="2" type="textarea" v-model="bpmnFormData.documentation" @change="updateElementDoc('documentation')" />
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {StrUtil} from '@/utils/StrUtil';
import { getDocumentValue, setDocumentValue } from "../common/documentationUtil";
import TimerEventPanel from "./eventDefinition/timerEventPanel";
import MessageEventPanel from "./eventDefinition/messageEventPanel";
import SignalEventPanel from "./eventDefinition/signalEventPanel";
import ErrorEventPanel from "./eventDefinition/errorEventPanel";
import ConditionEventPanel from "./eventDefinition/conditionEventPanel";
import {checkEventType} from "@/components/Process/common/bpmnUtils";

export default {
  name: "CommonPanel",
  components: {ConditionEventPanel, ErrorEventPanel, SignalEventPanel, MessageEventPanel, TimerEventPanel},
  /** 组件传值  */
  props : {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      rules:{
        id: [
          { required: true, message: '节点Id 不能为空', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '节点名称不能为空', trigger: 'blur' },
        ],
      },
      eventType: '', // 事件类型
      bpmnFormData: {
        // 勾选后,第一个任务节点默认为流程发起人节点,此时设计流程时,第一个任务节点的审批人信息默认会设置
        routineTask: true,
        // 退回, 驳回流程后是否清除表单数据
        clearForm: false,
        isExpanded: false,
        id: "",
        name: "",
        documentation: "",
        eventDefinitions: []
      },
    }
  },
  /** 传值监听 */
  watch: {
    id: {
      handler(newVal) {
        if (StrUtil.isNotBlank(newVal)) {
          this.resetTaskForm();
        }
      },
      immediate: true, // 立即生效
    },
  },
  methods: {
    resetTaskForm() {
      this.bpmnFormData = {
        routineTask: true,
        clearForm: false,
        isExpanded: false,
        id: "",
        name: "",
        documentation: "",
        eventDefinitions:[]
      };
      // 重置表单
      const formData = JSON.parse(JSON.stringify(this.modelerStore.element.businessObject));
      delete formData[`dataType`]
      this.bpmnFormData = Object.assign(this.bpmnFormData, JSON.parse(JSON.stringify(formData)));
      // 设置子流程展开或折叠状态
      if (this.bpmnFormData && this.bpmnFormData.$type === "bpmn:SubProcess") {
        this.$set(this.bpmnFormData, "isExpanded", this.bpmnFormData.di?.isExpanded);
      }
      // 处理流程分类
      if (this.bpmnFormData.$type === 'bpmn:Process') {
        if (StrUtil.isBlank(this.bpmnFormData.processCategory)) {
          this.bpmnFormData.processCategory = this.modelerStore.category;
          this.updateElementTask('processCategory')
        }
      }
      this.bpmnFormData.documentation = getDocumentValue(this.modelerStore.element) || "";
      this.eventType = "";
      // 获取事件类型
      if (checkEventType(this.bpmnFormData.$type)) {
        this.getFlowEventType(this.bpmnFormData, this.modelerStore.element.businessObject)
      }
    },
    // 获取事件类型
    getFlowEventType(bpmnFormData, businessObject) {
      if (businessObject.eventDefinitions && businessObject.eventDefinitions.length > 0) {
        if (businessObject.eventDefinitions[0].$type.indexOf("Timer") !== -1) {
          this.eventType = 'Timer';
        } else if (businessObject.eventDefinitions[0].$type.indexOf("Message") !== -1) {
          this.eventType = 'Message';
        } else if (businessObject.eventDefinitions[0].$type.indexOf("Signal") !== -1) {
          this.eventType = 'Signal';
        } else if (businessObject.eventDefinitions[0].$type.indexOf("Error") !== -1) {
          this.eventType = 'Error';
        } else if (businessObject.eventDefinitions[0].$type.indexOf("Condition") !== -1) {
          // flowable 不支持条件事件作为启动事件,保存xml校验会不通过
          if (bpmnFormData.$type === 'bpmn:StartEvent'){
            this.eventType = '';
          } else {
            this.eventType = 'Condition';
          }
        }
      }
    },
    updateElementTask(key) {
      if (key === "isExpanded") {
        this.modelerStore.modeling.toggleCollapse(this.modelerStore.element);
        return;
      }
      const taskAttr = Object.create(null);
      taskAttr[key] = this.bpmnFormData[key] || null;
      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
    },
    updateElementDoc(key) {
      const taskAttr = Object.create(null);
      taskAttr[key] = this.bpmnFormData[key] || null;
      setDocumentValue(this.modelerStore, this.modelerStore.element, taskAttr[key]);
    },
  }
}
</script>
